<template>
  <div class="app-container">
    <!-- 查询书籍条件 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="searchObj.name" placeholder="书籍名称" />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="datetime"
          placeholder="选择截止时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00"
        />
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getSameF()"
        >查询</el-button
      >
      <el-button type="danger" @click="resetData()">清空</el-button>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-circle-plus"
        @click="open()"
        >添加</el-button
      >
    </el-form>

    <!-- 书籍列表 -->
    <el-table :data="list" border fit highlight-current-row>
      <el-table-column label="序号" width="70" align="center">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="书籍名称" width="270" />
      <el-table-column prop="price" label="价格" width="250" />
      <el-table-column prop="gmtCreate" label="添加时间" width="300" />
      <el-table-column label="操作" width="550" align="center">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            v-on:click="queryBook(scope.row.id)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeBook(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :pager-count="count"
      :total="total"
      style="padding: 30px 0; text-align: center"
      layout="total, prev, pager, next, jumper"
      @current-change="fetchData"
    />

    <!-- 添加对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form :model="book" label-width="100px" class="demo-ruleForm">
        <el-form-item label="书名：">
          <el-input v-model="book.name" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item
          label="价格："
          prop="price"
          :rules="[{ type: 'number', message: '价格必须为数字值' }]"
        >
          <el-input
            type="price"
            v-model.number="book.price"
            autocomplete="off"
            placeholder="请输入价格"
          ></el-input>
        </el-form-item>

        <el-form-item label="图书头图片：">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:88/api/book/info/pri/upload"
            :show-file-list="false"
            :on-success="successHeadPri"
            name="multipartFile"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处，或<em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>

        <el-form-item
          label="库存："
          prop="stock"
          :rules="[{ type: 'number', message: '库存必须为数字值' }]"
        >
          <el-input
            type="stock"
            v-model.number="book.stock"
            autocomplete="off"
            placeholder="请输入库存"
          ></el-input>
        </el-form-item>

        <el-form-item label="详情图片：">
          <el-upload
            class="upload-demo"
            action="http://localhost:88/api/book/info/pri/upload"
            multiple
            :limit="39"
            :file-list="fileList"
            :on-success="successDetailPri"
            :on-remove="removerDetailPri"
            name="multipartFile"
          >
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm('book')">提交</el-button>
          <el-button type="primary" @click="resetForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 查询条件
      searchObj: {
        name: "",
        begin: "",
        end: "",
      },
      // 书籍列表数据
      list: [],
      // 分页
      page: 1,
      limit: 5,
      total: 10,
      count: 7,
      // 弹框
      dialogVisible: false,
      // 书籍
      book: {
        id: "",
        name: "",
        price: 123,
        pictureHeadPath: "",
        bookDetail: "",
        sales: 0,
        stock: "",
        detailPriPath: [],
      },
      // 图片集合
      fileList: [],
    };
  },
  created() {
    // 当页面加载时获取数据
    this.getList(1, 5);
  },
  methods: {
    removerDetailPri(file, fileList) {
      console.log("removerDetailPri", file);
      let detailPris = [];
      for (var i = 0; i < this.fileList.length; i++) {
        if (this.fileList[i].name != file.name) {
          detailPris.push(this.fileList[i]);
        }
      }
      this.fileList = detailPris;
    },

    successDetailPri(response, file, fileList) {
      this.fileList.push({ name: file.name, url: file.response.priPath });
    },

    successHeadPri(response, file, fileList) {
      console.log(response);
      this.book.pictureHeadPath = response.priPath;
      this.$message({
        message: "图片头长传成功！！",
        type: "success",
      });
    },

    uploadSuccess(response, file, fileList) {
      console.log("uploadSuccess", response);
      this.book.pictureHeadPath = response.priPath;
    },

    submitForm(formName) {
      let detailsBookPris = [];
      for (var i = 0; i < this.fileList.length; i++) {
        detailsBookPris.push(this.fileList[i].url);
      }
      this.book.detailPriPath = detailsBookPris;

      this.addBook();
    },
    resetForm() {},

    handlePreview(file) {
      console.log(file);
    },

    getList(current, limit) {
      let this_ = this;
      this.$axios
        .get(
          `http://localhost:88/api/book/info/get/list/page/${current}/${limit}`
        )
        .then(function (response) {
          this_.list = response.data.page.records;
          this_.page = response.data.page.current;
          this_.limit = response.data.page.size;
          this_.total = response.data.page.total;
          // this_.count=response.data.page.pages;
        })
        .catch(function (err) {
          console.log(err);
        });
    },

    fetchData(val) {
      this.page = val;
      if (this.searchObj.name || this.searchObj.end || this.searchObj.begin) {
        this.getSameData(this.page, this.limit);
      } else {
        this.getList(this.page, this.limit);
      }
    },
    open() {
      // 打开添加窗体
      this.dialogVisible = true;
      this.book = {};
    },
    addBook() {
      let this_ = this;
      this.$axios
        .post(`http://localhost:88/api/book/info/save`, this.book)
        .then(function (response) {
          this.$message({
            message: "添加图书成功！！",
            type: "success",
          });
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    queryBook(bookId) {
      //打开更新窗体
      this.dialogVisible = true;
      // 查询书籍
      let this_ = this;
      this.$axios
        .get(`http://localhost:88/api/book/info/info/${bookId}`)
        .then(function (response) {
          this_.book = response.data.book;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    updateBook() {
      let this_ = this;
      console.log(this.book);
      this.$axios
        .post(`http://localhost:88/api/book/info/update`, this.book)
        .then(function (response) {
          alert("修改完成");
          this_.book.id = "";
          this_.book.name = "";
          this_.book.price = "";
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    removeBook(bookId) {
      let this_ = this;
      this.$axios
        .post(`http://localhost:88/api/book/info/deleteOne/${bookId}`)
        .then(function (response) {
          alert("删除完成");
          this_.getList(this_.page, this_.limit);
        })
        .catch(function (err) {
          console.log(err);
        });
      // alert(bookId);
    },
    saveOrUpdate() {
      if (this.book.id) {
        //  修改操作
        this.updateBook();
        this.dialogVisible = false;
        this.getList(this.page, this.limit);
      } else {
        // 添加操作
        this.addBook();
        this.dialogVisible = false;
        this.getList(this.page, this.limit);
      }
    },

    getSameData(current, limit) {
      let this_ = this;
      this.$axios
        .post(
          `http://localhost:88/api/book/info/info/same/${current}/${limit}`,
          this.searchObj
        )
        .then(function (response) {
          alert("查询完成");
          this_.list = response.data.page.records;
          this_.page = response.data.page.current;
          this_.limit = response.data.page.size;
          this_.total = response.data.page.total;
        })
        .catch(function (err) {
          console.log(err);
        });
    },
    getSameF() {
      this.getSameData(1, this.limit);
    },

    resetData() {
      this.searchObj.name = "";
      this.searchObj.begin = "";
      this.searchObj.end = "";
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      alert("handleRemove");
    },
    handlePreview(file) {
      console.log(file);
      alert("handlePreview");
    },
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>